<template>
  <div
    class="w-full h-full flex justify-center overflow-y-auto bg-[#ffffffe4]"
    v-loading="loading"
    :element-loading-text="loadingText"
  >
    <vue-pdf-embed
      @loading-failed="loadingFailedFn"
      :source="sourceUrl"
      @loaded="loadedFn"
      class="vue-pdf-embed text-center w-[80%] h-full"
    />
  </div>
</template>

<script setup lang="ts">
import VuePdfEmbed from "vue-pdf-embed";
import { onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { getFileById } from "@/api/flow";

const props = defineProps({
  source: {
    type: Object || String,
    default: "",
  },
  loadingText: {
    type: String,
    default: "pdf文件数据加载中...",
  },
});
const loading = ref<boolean>(false);
const sourceUrl = ref<object | string>("");

// 文件加载成功
function loadedFn() {
  try {
    // 事件处理程序
    ElMessage.success("文件加载成功！");
  } catch (err) {
    // 错误事件处理程序（报错时执行）
    console.error(err);
  } finally {
    // 事件处理程序（报错或正常都会执行）
    loading.value = false;
  }
}
// 文件加载失败
function loadingFailedFn() {
  try {
    // 事件处理程序
    ElMessage.warning("文件加载失败，请重试！");
  } catch (err) {
    // 错误事件处理程序（报错时执行）
    console.error(err);
  } finally {
    // 事件处理程序（报错或正常都会执行）
    loading.value = false;
  }
}

// 文件流转换
function getObjectURL(data: any) {
  if (!data) {
    sourceUrl.value = "";
    return;
  }
  let url = "";
  let file = new Blob([data], { type: "application/pdf;chartset=utf-8" });
  if (window.URL.createObjectURL != undefined) {
    // 通用
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    // 兼容谷歌
    try {
      url = window.webkitURL.createObjectURL(file);
    } catch (error) {
      ElMessage.error("暂不支持谷歌浏览器");
    }
  } else if (window.URL != undefined) {
    // 兼容其他
    try {
      url = window.URL.createObjectURL(file);
    } catch (error) {
      ElMessage.error("暂不支持该浏览器");
    }
  }
  // 将转化后url赋值
  sourceUrl.value = url;
  console.log(sourceUrl.value);
}

// 获取pdf正文
async function getPdfPreviewFile() {
  loading.value = true;
  const res: any = await getFileById("1797824370236407809");
  if (!res) return;
  await getObjectURL(res);
}

// 作为组件使用放开监听即可
// watch(
//   () => props.source, //红头url
//   (n: any, o: any) => {
//     loading.value = true;
//     if (
//       !n ||
//       (Array.isArray(n) && n.length === 0) ||
//       (Object.prototype.toString.call(n) === "[object Object]" &&
//         Reflect.ownKeys(n).length === 0)
//     ) {
//       return;
//     } else {
//       getObjectURL(n);
//     }
//   },
//   {
//     immediate: true,
//     deep: true,
//   }
// );
onMounted(async () => {
  await getPdfPreviewFile();
});
</script>

<style scoped>
:deep(.vue-pdf-embed__page) {
  overflow: hidden !important;
}
</style>
